<template>
    <div class="voice_bar" @click="getvoluem">
        <el-slider v-model="value" :format-tooltip="formatTooltip"></el-slider>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: 80,
            persent: 0.0,
        }
    },
    mounted(){

    },
    methods: {
        getvoluem(){
            this.persent = this.value / 100;
            this.$emit('voice_ctrl', this.persent );
        },
        setVoice(persent){
            this. value = persent * 100;
        },
        formatTooltip(val) {
            return val+"%";
        }
    },
}
</script>

<style>
/* 音量 */
.voice_bar{ width:100px; height: 4px; margin-top: 13px;}

.voice_bar .el-tooltip {}
/* height: 10px; */
.voice_bar .el-slider__button-wrapper{ width:10px!important; height: 10px!important; top: -12px!important;}
.voice_bar .el-slider__button{ border: none!important; width:10px!important; height: 10px!important; width: 10px!important; }
.voice_bar .el-slider__runway{ width: 100px; height: 4px!important; background-color: #454546!important; }
.voice_bar .el-slider__bar{ height: 4px!important; background-color: #b82525!important; }
</style>